// ReactNative_SVG_LinearGradient_Example.js
// Minimal runnable example using react-native-svg
// Usage:
// 1) Install dependency: `yarn add react-native-svg` (Expo already includes it)
// 2) For bare React Native: run `cd ios && pod install` after install
// 3) Save this file and import it from your App.js: `import GradientExample from './ReactNative_SVG_LinearGradient_Example';` then use <GradientExample />

import React, {useState} from 'react';
import {View, TouchableOpacity, Text} from 'react-native';
import Svg, {Defs, LinearGradient, Stop, Rect} from 'react-native-svg';

export default function GradientExample() {
  const [on, setOn] = useState(false);

  // 两组渐变颜色，点击切换
  const gradients = [
    ['#ff7e5f', '#feb47b'], // 暖橙
    ['#6a11cb', '#2575fc'], // 冷蓝
  ];

  const [c0, c1] = gradients[on ? 1 : 0];

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f2f2f2',
      }}>
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={() => setOn(prev => !prev)}>
        <Svg width={320} height={200}>
          <Defs>
            <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
              <Stop offset="0" stopColor={c0} stopOpacity="1" />
              <Stop offset="1" stopColor={c1} stopOpacity="1" />
            </LinearGradient>
          </Defs>

          {/* 使用线性渐变填充矩形 */}
          <Rect
            x="0"
            y="0"
            width="320"
            height="200"
            rx="14"
            fill="url(#grad)"
          />
        </Svg>
      </TouchableOpacity>

      <Text style={{marginTop: 14, fontSize: 50}}>
        {on ? '当前: 冷蓝渐变（点击切换）' : '当前: 暖橙渐变（点击切换）'}
      </Text>
    </View>
  );
}
